//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/zhujiemian/组50_22.png');
  // background-size: 100%;
  // background-size:cover;
  background-size:(1080/54)*1rem 43.555556rem;
}
a{
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.app{
  width: 100%;
  position: relative;
  .top{
    width: p2r(1004);
    height: p2r(439);
    background: url("../images/zhujiemian/组51.png") no-repeat center / 100% 100%;
    margin: 0 auto;
    position: relative;
    .head{
      @include size(180,180);
      //width: (180/54)*1rem;
      //height: (180/54)*1rem;
      //#00C490
      //background-color: skyblue;
      @include bgc("../images/zhujiemian/2.pic.jpg",180);
      //position: absolute;
      top:(58/54)*1rem;
      //left: 50%;
      //margin-left: (-180/54/2)*1rem;
      border: (9/54)*1rem solid white;
      border-radius: 50%;
      background: url("../images/zhujiemian/2.pic.jpg") no-repeat center / 100% 100%;
      //a{
      //  display: inline-block;
      //  position: absolute;
      //  width: 100%;
      //  height: 100%;
      //}
    }
    .name{
      font-size:(40/54)*1rem;
      font-weight: bold;
      color: #dc2f2f;
      top:(240/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .progress{
      width: (290/54)*1rem;
      height: (26/54)*1rem;
      //#00C490
      background-color: #DCDCDC;
      position: absolute;
      top:(314/54)*1rem;
      left: (180/54)*1rem;
      border: (2/54)*1rem solid #DCDCDC;
      border-radius: (26/54)*1rem;
      .step{
        height: 100%;
        width: 50%;
        //border: 1px solid red;
        background-color: #00C490;
        border-radius: (26/54)*1rem;
      }
    }
    .level{
      font-size:(34/54)*1rem;
      font-weight: bold;
      color: #dc2f2f;
      top:(306/54)*1rem;
      left: (89/54)*1rem;
      position: absolute;
    }
    .marroon{
      width: (101/54)*1rem;
      height: (292/54)*1rem;
      position: absolute;
      top: (45/54)*1rem;
      right: (86/54)*1rem;
      background: url("../images/zhujiemian/组23.png") no-repeat center / 100% 100%;
    }
    .money{
      width: (68/54)*1rem;
      height: (41/54)*1rem;
      position: absolute;
      top: (303/54)*1rem;
      left: (524/54)*1rem;
      background: url("../images/zhujiemian/组36拷贝3.png") no-repeat center / 100% 100%;
    }
    .money_num{
      font-size:(34/54)*1rem;
      font-weight: bold;
      color: #dc2f2f;
      top:(306/54)*1rem;
      left: (610/54)*1rem;
      position: absolute;
    }
  }
  .rank_game{
    position: absolute;
    width: (506/54)*1rem;
    height: (537/54)*1rem;
    background: url("../images/zhujiemian/组54.png") no-repeat center / 100% 100%;
    left: (52/54)*1rem;
    top: (443/54)*1rem;
    .name{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(23/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (-35/54/2)*1rem;
    }
    .number{
      font-size:(34/54)*1rem;
      font-weight: bold;
      color: white;
      bottom:(55/54)*1rem;
      left: (34/54)*1rem;
      position: absolute;
    }
  }
  .ranking{
    position: absolute;
    width: (479/54)*1rem;
    height: (404/54)*1rem;
    background: url("../images/zhujiemian/组56.png") no-repeat center / 100% 100%;
    right: (52/54)*1rem;
    top: (443/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(23/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (-7/54/2)*1rem;
      white-space:nowrap;
    }
  }
  .shop{
    position: absolute;
    width: (479/54)*1rem;
    height: (282/54)*1rem;
    background: url("../images/zhujiemian/组58.png") no-repeat center / 100% 100%;
    left: (52/54)*1rem;
    top: (996/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(40/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (127/54)*1rem;
      white-space:nowrap;
    }
  }
  .battle{
    position: absolute;
    width: (479/54)*1rem;
    height: (413/54)*1rem;
    background: url("../images/zhujiemian/组60.png") no-repeat center / 100% 100%;
    right: (52/54)*1rem;
    top: (871/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(45/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (-7/54/2)*1rem;
      white-space:nowrap;
    }
  }
  .bank{
    position: absolute;
    width: (479/54)*1rem;
    height: (282/54)*1rem;
    background: url("../images/zhujiemian/组62.png") no-repeat center / 100% 100%;
    left: (52/54)*1rem;
    top: (1291/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(30/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (127/54)*1rem;
      white-space:nowrap;
    }
    .money{
      width: (68/54)*1rem;
      height: (41/54)*1rem;
      position: absolute;
      top: (149/54)*1rem;
      left: (239/54)*1rem;
      background: url("../images/zhujiemian/组36拷贝3.png") no-repeat center / 100% 100%;
    }
    .money_num{
      font-size:(34/54)*1rem;
      font-weight: bold;
      color: white;
      top:(152/54)*1rem;
      left: (312/54)*1rem;
      position: absolute;
    }
    .progress{
      width: (206/54)*1rem;
      height: (40/54)*1rem;
      //#00C490
      background-color: #ffca00;
      position: absolute;
      top:(204/54)*1rem;
      left: (250/54)*1rem;
      border: (5/54)*1rem solid #514666;
      border-radius: (40/54)*1rem;
      .daojishi{
        width: 100%;
        font-size: (18/54)*1rem;
        text-align: center;
        position: absolute;
        top:(1/54)*1rem;
        color: white;
      }
    }
  }
  .activity{
    position: absolute;
    width: (479/54)*1rem;
    height: (547/54)*1rem;
    background: url("../images/zhujiemian/组64.png") no-repeat center / 100% 100%;
    right: (52/54)*1rem;
    top: (1299/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(35/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (-7/54/2)*1rem;
    }
  }
  .knowledge{
    position: absolute;
    width: (479/54)*1rem;
    height: (380/54)*1rem;
    background: url("../images/zhujiemian/组65.png") no-repeat center / 100% 100%;
    left: (52/54)*1rem;
    top: (1585/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(30/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (-7/54/2)*1rem;
    }
  }
  .goods{
    position: absolute;
    width: (479/54)*1rem;
    height: (380/54)*1rem;
    background: url("../images/zhujiemian/组67.png") no-repeat center / 100% 100%;
    left: (52/54)*1rem;
    top: ((1585+380+6)/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(30/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (127/54)*1rem;
      white-space:nowrap;
    }
  }
  .set{
    position: absolute;
    width: (479/54)*1rem;
    height: (395/54)*1rem;
    background: url("../images/zhujiemian/组68.png") no-repeat center / 100% 100%;
    right: (52/54)*1rem;
    top: ((1299+547+17)/54)*1rem;
    .num{
      font-size:(62/54)*1rem;
      font-weight: 800;
      color: white;
      top:(30/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-left: (127/54)*1rem;
      white-space:nowrap;
    }
  }
  .welfare{
    position: fixed;
    width: (336/54)*1rem;
    height: 2.1074074074rem;
    right: 0;
    top: ((1389+10+15)/54)*1rem;
    border: 2px solid #ffe605;
    border-radius:(14/54)*1rem;
    background-color: #ffffff;
    .ico{
      width: (134/54)*1rem;
      height: (134/54)*1rem;
      background: url("../images/zhujiemian/组51_65.png") no-repeat center / 100% 100%;
      border: 1px solid #ffffff;
      border-radius:50%;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      left: -1.37037rem
    }
    .zi{
      position: absolute;
      color: #dc2f2f;
      top:50%;
      transform: translateY(-50%);
      right: 0.990741rem;
      font-size:(40/54)*1rem;
      font-weight: bold;
    }
  }
}
